<template>
  <div class="tags">
    <header class="h-[350px] relative">
      <img
        src="~/assets/images/article_default.png"
        class="h-full w-full object-cover relative z-[-1]"
        alt=""
      />
      <div class="absolute inset-0 flex flex-col bg-black bg-opacity-50">
        <div class="my-auto text-white mx-auto">
          <h1 class="text-white text-center text-[28px]">
            {{ $t('tagsClassification') }}
          </h1>
        </div>
      </div>
    </header>
    <layouts-main>
      <Card>
        <div class="p-8">
          <h1 class="text-[25px] text-[#4c4948] text-center">
            {{ $t('tagsClassification') }}
          </h1>
          <div
            class="flex flex-wrap justify-center mt-5 gap-x-6 gap-y-8 tags-wrapper"
            :style="{ '--num': tagNum }"
          >
            <nuxt-link
              v-for="tag in tags"
              :key="tag.id"
              :to="localePath(`/tags/${tag.id}`)"
              class="tags-item text-[24px]"
              >{{ tag.name }}</nuxt-link
            >
          </div>
        </div>
      </Card>
      <template #right>
        <user-card />
        <div class="sticky top-16 mb-6">
          <Card
            class="sticky mt-4"
            icon="wenzhang1"
            :title="$t('latestArticles')"
          >
            <div
              v-for="lastNewArticle in lastNewArticles"
              :key="lastNewArticle.id"
              class="flex mb-4"
            >
              <div class="w-[50px] h-[50px]">
                <img
                  src="~/assets/images/article_default.png"
                  alt="article_default"
                  class="w-full h-full block object-cover"
                />
              </div>
              <div class="flex-1 w-0 ml-3">
                <nuxt-link
                  :to="localePath(`/article/${lastNewArticle.id}`)"
                  class="w-full text-xs text-gray-700 hover:text-blue-500 duration-300 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis"
                >
                  {{ lastNewArticle.title }}
                </nuxt-link>
                <div
                  class="text-xs text-gray-400 mt-1 w-full cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis"
                >
                  {{ lastNewArticle.create_time }}
                </div>
              </div>
            </div>
          </Card>

          <Card class="sticky mb-4 mt-6" icon="biaoqian" :title="$t('tags')">
            <div class="flex flex-wrap gap-x-3 gap-y-2">
              <nuxt-link
                v-for="row in tags"
                :key="row.id"
                class="text-base text-gray-400 cursor-pointer duration-300"
                :to="localePath(`/tags/${row.id}`)"
              >
                <div>{{ row.name }}</div>
              </nuxt-link>
            </div>
          </Card>
        </div>
      </template>
    </layouts-main>
  </div>
</template>

<script>
import { gsap } from 'gsap'
export default {
  name: 'Tags',
  async asyncData(context) {
    const { data } = await context.$apis.client.tagsPage()
    return {
      lastNewArticles: data.lastNewArticles,
      tags: data.tags,
      tagNum: data.tagNum,
    }
  },
  data() {
    return {
      select: 0, // 选中的索引
      titles: [],
      scrollTops: [], // 每个标题滚动到中间需要滚动的量
      scrollPercent: 0, // 滚动百分比
    }
  },
  watch: {
    select: {
      handler(index) {
        if (this.scrollTops.length < 0 || !this.$refs['total-wrapper'])
          return false
        const scrollTop = this.scrollTops[index]
        this.$refs['total-wrapper'].scrollTop = scrollTop
      },
      immediate: true,
    },
  },
  mounted() {
    // this.parseContent()
  },
  methods: {
    handleSelect(title) {
      const html = document.documentElement
      gsap.to(html, {
        scrollTop: title.top - 80,
        duration: 0.5, // 持续时间
      })
    },
    onSelect(index) {
      this.select = index
    },
    // 获取titles
    async onGetTitle(titles) {
      this.titles = titles

      await this.$nextTick()
      // 在这里获取每个标题 在中间显示，需要滚动的距离；
      // 需要滚动的距离 = 距离顶部的高度 - 父容器距离顶部的高度 - 父容器高度的一半
      const lis = Array.from(
        this.$refs['total-wrapper'].querySelectorAll('ul>li')
      )
      const wrapper = this.$refs['total-wrapper']
      const rect = wrapper.getBoundingClientRect()
      this.scrollTops = lis.map(
        (el) => el.getBoundingClientRect().top - rect.top - rect.height / 2
      )
    },
    // 获取滚动百分比
    onScrollPercent(scrollPercent) {
      this.scrollPercent = scrollPercent
    },
  },
}
</script>
<style lang="scss" scoped>
@use 'sass:math';
.tags {
  header {
    animation: SlideDown 0.52s ease-in-out;
  }
  main {
    animation: SlideUp 0.52s ease-in-out;
  }
  .select {
    background-color: #00c4b6;
    border-color: #009d92;
    color: #ffffff;
  }
}

@keyframes SlideDown {
  0% {
    transform: translateY(-30px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes SlideUp {
  0% {
    transform: translateY(30px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@function randomColor() {
  $r: math.random() * 256;
  $g: math.random() * 256;
  $b: math.random() * 256;
  @return rgb($r, $g, $b);
}

.tags-wrapper {
  $end: var(--num);
  .tags-item {
    @for $i from 1 through 10 {
      &:nth-child(10n + #{$i}) {
        color: randomColor();
      }
    }
  }
}
</style>
